<template>
  <div>
    <el-dialog
      title="选择角色"
      :visible.sync="dialogVisible"
      width="800px"
      @close="handleClose"
    >
      <section class="container">
        <el-row :gutter="100">
          <el-col :span="12">
            <section class="left">
              <section class="title">所有角色</section>
              <el-input
                @input="roleList($event, inputSearch)"
                size="mini"
                style="margin-bottom: 10px"
                suffix-icon="el-icon-search"
                v-model="inputSearch"
              ></el-input>
              <el-checkbox-group v-model="selectRole">
                <el-checkbox
                  class="checkbox"
                  v-for="item in all1"
                  :key="item.id"
                  :label="item"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </section>
          </el-col>
          <el-col :span="12">
            <section class="right">
              <section class="title">已选角色</section>
              <el-checkbox-group v-model="selectRole">
                <el-checkbox
                  class="checkbox"
                  v-for="item in selectRole"
                  :label="item"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </section></el-col
          >
        </el-row>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAuthor">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { roleList, save, getAuthor } from '@/api/tenant/tenant.js'
export default {
  data () {
    return {
      dialogVisible: false,
      inputSearch: '',
      all1: [],
      selectRole: [],
      selectRole1: []
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
      this.roleList()
    },
    roleList ($event, name) {
      roleList({ name: name }).then((res) => {
        this.all1 = []
        let item3 = { id: '', name: '' }
        let item = { id: '', name: '' }
        for (let i = 0; i < res.data.page.list.length; i++) {
          item = res.data.page.list[i]
          // item.name=res.data.page.list[i].name
          this.all1.push(item)
        }
        console.log(this.all1)

        this.getAuthor().then((res) => {
          console.log(this.selectRole.length)
          console.log(this.all1.length)
          let buffer = []
          for (let i = 0; i < this.selectRole.length; i++) {
            for (let j = 0; j < this.all1.length; j++) {
              if (this.selectRole[i].id === this.all1[j].id) {
                console.log(111111)
                buffer.push(this.all1[j])
              }
            }
          }
          this.selectRole = buffer
          console.log(this.selectRole)
        })
      })

      // this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO
    },
    setAuthor () {
      let ids = []
        console.log(this.$store.state.tentant.bookAuthorDTO)
      this.selectRole.forEach((item) => {
        ids.push(item.id)
      })
      ids = ids.join(',')
      save({
          id: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.id,
          bookId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.bookId,
          officeId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.officeId,
          useId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.useId,
          roleId: ids
      }).then((res) => {
          this.$message({
            message: '恭喜您编辑成功',
            type: 'success'
            });
            this.$emit('refreshDataList3',this.selectRole)
      })
    },
    // 获取授权
    getAuthor () {
      let that = this
      return new Promise(function (resolve, reject) {
        getAuthor({
          roleId: that.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.roleId
        }).then((res) => {
          that.selectRole = []
          let item1 = { id: '', name: '' }
          res.data.page.roleList.forEach((item) => {
            item1 = item
            // item1.name = item.name;
            that.selectRole.push(item1)
          })
          resolve(res.data)

          console.log(that.selectRole)
        })
      })
    },
    handleClose (done) {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input.el-input--suffix .el-input__icon {
  line-height: 29px !important;
}
.container {
  width: 100%;
  .checkbox {
    display: block;
    margin-bottom: 5px;
  }
  .title {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .left {
    width: 100%;
    height: 500px;
    border: 1px #aaaaaa solid;
    padding: 10px;
  }
  .right {
    padding: 10px;
    width: 100%;
    height: 500px;
    border: 1px #aaaaaa solid;
  }
}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 20px 20px 0;
  padding-bottom: 0px;
  padding-bottom: 0 !important;
  overflow-x: hidden;
}
</style>
